<template>
  <div class="main-container">
    <banner-carousel/>
    <!-- <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <img :src="item.src" class="banner"/>
      </el-carousel-item>
    </el-carousel> -->
    <div class="container1">
      <div class="mainCont">
        <div class="mainCont-1">
          <p class="title">横山羊肉，陕西省榆林市横山区特产，中国国家地理标志产品。</p>
          <p class="cont">横山区位于陕西省北部、榆林市中部偏西，地处毛乌素沙漠与黄土高原过渡地带，是正在建设的国家能源化工基地以及“西气东输、西煤东运、西电东送”的重要组成部分，也是著名古边重镇和革命老区。横山光照充足，雨热同季，广袤的黄土高原孕育了品目繁多的绿色产品，其中尤以羊肉、绿豆、大米、杂粮等特色农产品品质最好、口碑最佳。横山的白绒山羊，长期食用地椒、苜蓿、沙葱、香艾等多种富含微量元素的菊科、豆科、禾本科植物，其肉质细嫩、肥瘦相间、低脂无膻、香味浓郁。
          </p>
        </div>
      </div>
      <div class="mainCont2">
        <img src="/img/like3.jpg" />
        <div class="relative">
          <div class="redCard">Lamb</div>
        </div>
      </div>
    </div>

    <div class="container3">
      <div class="one">
        <img src="/img/bg.jpg" />
        <p class="bg"></p>
      </div>
      <div class="two">
        <div class="desc">
          横山羊肉具有肉质鲜嫩、肥瘦相间，高蛋白，低脂肪，无膻味，香味浓郁，风味独特的优点，在羊肉中独具特色，被誉为“肉中之人参”。它以其独特的肉质、丰富的营养价值和显著的保健功能，深受人们的喜爱，其系列产品已成为陕北人迎宾待客的主餐和送礼佳品。
        </div>
        <div class="name">Lamb</div>
      </div>
      <!-- <div class="tree"></div> -->
    </div>

    <div class="container4">
      <div class="container4-1">
        <div class="top-1">
          <div class="lf"></div>
          <div class="lr">
            <div class="title pad">历史悠久</div>
            <div class="cont pad">
              先后有九位帝王生于斯、长于斯，战斗于斯，对横山羊肉赞不绝口。

            </div>
          </div>
        </div>
        <div class="top-2">
          <div class="lf"></div>
          <div class="lr">
            <div class="title pad">食惟羊肉</div>
            <div class="cont pad">
              春节前后，大摆羊宴，炖羊肉，蒸羊肉，大块吃肉，大碗喝酒，直至元宵节。

            </div>
          </div>
        </div>
      </div>
      <div class="container4-2">
        <img src="/img/yang.jpg" />
        <div class="bg"></div>
      </div>
      <div class="container4-3"></div>
    </div>

    <!-- 精选课程 -->
    <div class="moduleBox">
      <div class="moduleBox-title">
        <h3>精选美食</h3>
        <a href="/product">查看全部</a>
      </div>
      <div class="imgTextBoxList">
        <dl class="imgTextBox" v-for="(prod, index) in prodList" :key="index">
          <!-- <a  href="detail.html"> -->
            <dt class="imgTextBox-img" @click="handleClick(prod)">
              <img :src="prod.img" alt="">
              <p class="position">{{ prod.title }}</p>
            </dt>
          <!-- </a> -->
        </dl>
      </div>
    </div>
  </div>
</template>
<script>
// import BannerSwipper from '../components/BannerSwipper'
import BannerCarousel from '@/components/BannerCarousel'

import { listProdSelection } from '@/api/product'

export default {
  name: 'Index',
  components: { BannerCarousel },
  data() {
    return {
      prodList: []
    }
  },
  created() {
    this.getProdList()
  },
  methods: {
    getProdList() {
      listProdSelection().then(res => {
        this.prodList = res.data
      })
    },
    handleClick(prod) {
      const prod_id = prod.prod_id
      this.$router.push({
        path: '/product/' + prod_id + '/detail'
      })
    }
  },
}
</script>
<style>
.banner {
  width: 100%;
  height: 100%;
}

</style>
